<template>
	<view class="register">
		<view class="register-content">
			<view class="register-item">
				<uni-icons type="contact" size="30" color="#11c53e"></uni-icons>
				<input type="text" name="userName" placeholder="请输入用户名" v-model="userName" />
			</view>
			<view class="register-item">
				<uni-icons type="person" size="30" color="#11c53e"></uni-icons>
				<input type="text" name="userAccount" placeholder="请输入账号" v-model="userAccount" />
			</view>
			<view class="register-item">
				<uni-icons type="phone" size="30" color="#11c53e"></uni-icons>
				<input type="text" name="userPhone" placeholder="请输入手机号" v-model="userPhone" />
			</view>
			<view class="login-code">
				<uni-icons type="chat" size="30" color="#11c53e"></uni-icons>
				<input type="text" placeholder="请输入验证码" v-model="userCode" />
				<button type="warning" :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
			</view>
			<view class="register-item">
				<uni-icons type="locked" size="30" color="#11c53e"></uni-icons>
				<input type="password" name="userPassword" placeholder="请输入密码" v-model="userPassword" />
			</view>
			<view class="register-item">
				<uni-icons type="locked-filled" size="30" color="#11c53e"></uni-icons>
				<input type="password" name="againPassword" placeholder="请再次输入密码" v-model="againPassword" />
			</view>
		</view>
		<view class="register-button"><button @click="register">注册并登录</button></view>
	</view>
</template>

<script>
import { getCode } from '../../../api/user.js'
export default {
	data() {
		return {
			userPhone: '',
			usedPhone: '',
			userCode: '1234',
			code: '1234',
			codeNum: 10,
			disabled: false,
			codeMsg: '获取验证码',
			userName: '',
			userAccount: '',
			userPassword: '',
			againPassword: '',
			rules: {
				userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				userAccount: [{ required: true, message: '请输入账号', trigger: 'blur' }],
				userAccount: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
				userCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
				userPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				againPassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' }]
			}
		};
	},
	methods: {
		async sendCode() {
			if (this.userPhone == '') {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			} else if (this.userPhone != '') {
				let reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.userPhone)) {
					uni.showToast({
						title: '输入有效的手机号',
						icon: 'none'
					});
				} else {
					//禁用按钮
					this.disabled = true;
					//发送请求
					let result = await getCode({ phone: this.userPhone })
					if (result.code === 200) {
						this.code = result.data
						this.usedPhone = this.userPhone
					}
					//倒计时
					let timer = setInterval(() => {
						--this.codeNum;
						this.codeMsg = `重新发送 ${this.codeNum}`;
					}, 1000);
					//判断定时器停止
					setTimeout(() => {
						clearInterval(timer);
						(this.disabled = false), (this.codeMsg = '获取验证码'), (this.codeNum = 10);
					}, 10000);
				}
			}
		},
		//注册并登录
		async register() {
			if (this.userName == '' || this.userAccount == ''
				|| this.userPassword == '' || this.againPassword == ''
				|| this.userPhone == '' || this.userCode == '') {
				uni.showToast({
					title: '请填写全部信息',
					icon: 'none'
				});
			} else if (this.userPassword != this.againPassword) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				});
			} else if (this.userCode != this.code) {
				uni.showToast({
					title: '验证码错误',
					icon: 'none'
				});
			} else if (this.usedPhone != this.userPhone) {
				uni.showToast({
					title: '请使用获取验证码的手机号',
					icon: 'none'
				});
			}
			else {
				await this.$store.dispatch("user/saveOrUpdate", {
					userAccount: this.userAccount,
					userName: this.userName,
					userPassword: this.userPassword,
					userPhone: this.userPhone
				})
				uni.switchTab({
					url: '/pages/event/index'
				});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.register {
	width: 100%;
	background-position: center;
	background-size: cover;
	background-color: #fff;
	margin: 0px;
	background-size: 100% 100%;
	background-attachment: fixed;
	opacity: 0.8;

	.register-content {
		display: flex;
		flex-direction: column;
		margin: 0 50rpx;

		input {
			padding: 10rpx;
			width: 60%;
			height: 70rpx;
		}

		i {
			color: #11c53e;
			padding-right: 20rpx;
			font-size: 50rpx;
		}

		.register-item {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
		}
	}

	.login-code {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		border-bottom: 1rpx solid gainsboro;

		button {
			width: 250rpx;
			height: 85rpx;
			font-size: 30rpx;
			line-height: 85rpx;
			background-color: #11c53e;
			color: #fff;
			margin-bottom: 10rpx;
		}
	}

	.register-button {
		margin-top: 150rpx;
		width: 90%;
		margin-left: 5%;

		button {
			background-color: #11c53e;
			color: #fff;
		}
	}
}
</style>
